<style type="text/css">
	.list-logo li {
		margin:5px;
		padding:5px;		
		border-radius:5px;
		-moz-border-radius:5px;
		float:left;
	}
	.list-logo img.img-thumb {
		width:145px;
		height:145px;
	}
	.list-logo .selected, .list-logo li:hover{
		background:#463427;
	}	
</style>
<div class="panel-manage">
	<div class="navbar navbar-inverse">
		<div class="navbar-inner text-right">	    	
			<button id="btn-logo-add" class="btn btn-primary">เพิ่มรูป</button>		
		</div>
	</div>	
	<div class="panel-message"></div>
	<div class="alert alert-info" style="margin-top:10px;"><p><i class="icon-info-sign"></i>
		<small>ขนาดความกว้างและยาวที่เหมาะสม <?= $image_config['logo_img_limit_width'] ?> x <?= $image_config['logo_img_limit_height'] ?> และขนาดรูปภาพไม่เกิน 
			<?= ($image_config['logo_img_limit_size'] / 1000); ?>kb สนับสนุนไฟล์รูปภาพนามสกุล 
			<?php print implode(',', array_unique(explode(',', strtolower(implode(',', array_unique($image_config['logo_img_extensions'])))))); ?>
		</small></p>
	</div>
	<div>
		<ul class="thumbnails list-logo">
			<?php
				for ($i=0; $i<count($data); $i++):
					if ($data[$i]["IN_USE"]): ?>				
						<li class="selected text-right thumbnail">
							<span class="label label-success label-active" style="float:left;">Active</span>												
							<span class="icon-ok btn-hover btn-logo-select"></span>
							<span class="icon-remove btn-hover btn-logo-remove"></span>
							<img class="img-thumb" src="<?php print $data[$i]['IMG_FILE'] ?>" />
						</li>
				<?php else: ?>
						<li class="text-right thumbnail">											
							<span class="icon-ok btn-hover btn-logo-select"></span>
							<span class="icon-remove btn-hover btn-logo-remove"></span>
							<img class="img-thumb" src="<?php print $data[$i]['IMG_FILE'] ?>" />
						</li>
				<?php endif; ?>			
			<?php endfor; ?>		
		</ul>
	</div>	
	<form id="frm-logo" method="post" action="<?php print base_url() . $cafe_name . '/backend/general/logo/add'; ?>" enctype="multipart/form-data">
		<input type="file" name="fl" id="f-logo" accept="image/png,image/jpg" style="visibility:hidden;" />
	</form>		
</div>
<script type="text/javascript">
	$(function(){
		$('#btn-logo-add').click(function(e){
			e.preventDefault();
			
			$('#f-logo').trigger('click');
			$('#f-logo').change(function(){
				$('#frm-logo').submit();
			});
		});
		$('.btn-logo-remove').click(function(){
			if (confirm('คุณต้องการลบรูปใช่หรือไม่')){
				var img_path = $(this).parents('li').find('img.img-thumb').attr('src');
				var img_arr = img_path.split('/');
				var me = $(this);
	
				$.post('<?php print base_url() . $cafe_name; ?>/backend/general/logo/ajax_remove_item', { fn : img_arr[img_arr.length-1] }, function(output){
					
					switch (output.result){
					    case -2: case -1:{
					    	var html = '<div class="alert alert-error">';
							html += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
							html += output.message + '</div>';
							
							$('.panel-message').html(html);
							setTimeout(function(){ window.location.href = output.redirect_url; },2000)
					    }
					    break;
					    default:{
							if (output.result){
								me.parents('li').fadeOut(1000);
								html = '<div class="alert alert-success">';							
							} else
								html = '<div class="alert alert-error">';
								
							html += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
							html += output.message + '</div>';
							$('.panel-message').html(html);
		
							autoclosealert('.alert', 2000);    	
					    }
					    break;
				    }				
				}, 'json');
			}
		});
		$('.btn-logo-select').click(function(){			
			var img_path = $(this).parents('li').find('img.img-thumb').attr('src');
			var img_arr = img_path.split('/');
			var me = $(this).parents('li');

			$.post('<?php print base_url() . $cafe_name; ?>/backend/general/logo/ajax_select_item', { fn : img_arr[img_arr.length-1] }, function(output){							
				switch (output.result){
				    case -2: case -1:{
				    	var html = '<div class="alert alert-error">';
						html += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
						html += output.message + '</div>';
							
						$('.panel-message').html(html);
						setTimeout(function(){ window.location.href = output.redirect_url; },2000)
				    }
				    break;
				    default:{
						$('.list-logo > li').each(function(){						
							$(this).removeClass('selected');
							$(this).find('.label-active').remove();
						});
						me.addClass('selected');
						me.prepend('<span class="label label-success label-active" style="float:left;">Active</span>');
						$('img.logo-img-thumb').attr('src', img_path);  	
				    }
				    break;
				}									
			}, 'json');
		});
	});
</script>